@charset "utf-8";
@import "pxvalue.less";
@import "font_common";
body,
html,
.mui-content {
    font-family: "微软雅黑";
    background-color: #FFFFFF;
    padding-bottom: @p300;
}

.fr {
    float: right;
}

.mui-action-back {
    height: 44px;
    width: 44px;
    img {
        width: 100%;
    }
}

.fl {
    float: left;
}

.mui-bar {
    top: @p40;
    font-size: @p34;
}

.hr_20 {
    height: @p20;
    background-color: #f6f6f6;
}

.ptsp_top_stats {
    height: 22px;
    width: 100%;
    z-index: 20;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
}

.mui-title span {
    margin-left: @p40 ;
    margin-left: @p40 ;
    display: inline-block;
    height: 44px;
    color: #888888;
    border-bottom: 4px solid transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
}

.mui-title span.ptsp_active {
    color: #353535;
    border-bottom: 4px solid #353535;
}

.ptsp_banner {
    height: @p710;
    // margin-top: @p40;
    position: relative;
    .ptsp_pic_num {
        width: @p92;
        height: @p40;
        font-size: @p20;
        background-color: rgba(65, 65, 65, .7);
        position: absolute;
        right: @p20;
        bottom: @p20;
        z-index: 10;
        text-align: center;
        color: #FFFFFF;
        border-radius: @p10;
    }
    .mui-slider-group {
        height: 100%;
    }
    .mui-slider-item {
        a {
            width: 100%;
            height: 100%;
        }
        img {
            width: 100%;
            height: 100%;
        }
    }
    #slider {
        height: 100%;
        img {
            height: 100%;
        }
    }
}

.ptsp_goods_info {
    padding-left: @p28;
    padding-right: @p28;
    padding-top: @p20;
    background-color: #FFFFFF;
    padding-bottom: @p20;
    .title {
        font-size: @p28;
        color: #353535;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .info {
        width: 100%;
        img {
            width: 100%;
        }
    }
    .price {
        font-size: @p28;
        color: #888888;
        .sale_price {
            font-size: @p36;
            color: #ff0000;
            height: @p30;
        }
        .pick_num span {
            float: left;
            width: @p36;
            height: @p30;
            font-size: @p22;
            line-height: @p30;
            text-align: center;
            border: 1px solid #888888;
            border-left: none;
            border-right: none;
        }
        .pick_num span:nth-child(1) {
            border-left: 1px solid #888888;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        .pick_num span:nth-child(2) {
            border: 1px solid #888888;
        }
        .pick_num span:nth-child(3) {
            border-right: 1px solid #888888;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }
    }
    .price div:first-child {
        padding-top: @p10;
    }
    .ptsp_pintuanjia_icon {
        img {
            width: @p80;
            height: @p36;
        }
    }
}

.mui-scroll-wrapper {
    top: 66px;
    height: @p600*2;
}

.ptsp_goods_info_img {
    .title {
        padding: 0 @p28;
        height: @p86;
        line-height: @p86;
        font-size: @p24;
        text-align: center;
        border-bottom: 1px solid #ededed;
    }
}

.ptsp_say {
    .title {
        padding: 0 @p28;
        height: @p86;
        line-height: @p86;
        font-size: @p24;
        text-align: center;
        border-bottom: 1px solid #ededed;
    }
    .user_say {
        padding: @p28;
        //      background-color: #ccc;
        font-size: @p22;
        color: #353535;
        line-height: @p48;
        overflow: hidden;
        .user_img {
            width: @p48;
            height: @p48;
            border-radius: 50%;
            float: left;
        }
        .user_msg {
            float: left;
            margin-left: @p20;
            .img_list {
                width: 100%;
                margin-top: @p15;
                img {
                    width: @p264;
                    height: auto;
                }
            }
        }
    }
    .user_say div:first-child {
        height: @p48;
        span {
            line-height: @p50;
            float: left;
            margin-left: @p20;
        }
    }
}

.ptsp_users {
    background-color: #ffffff;
    .title {
        padding: 0 @p28;
        height: @p65;
        line-height: @p65;
        font-size: @p24;
        border-bottom: 1px solid #ededed;
    }
    .user_info {
        height: @p100;
        background-color: #ffffff;
        padding: 0 @p28;
        img {
            margin-top: @p15;
            display: block;
            width: @p70;
            height: @p70;
            border-radius: 50%;
        }
        .to_join {
            width: @p120;
            height: @p70;
            margin-top: @p15;
            background-image: url(../../images/ptsp/btn_bg_03.png);
            background-size: 100% 100%;
            line-height: @p70;
            text-align: center;
            font-size: @p24;
            color: #FFFFFF;
        }
        .time {
            text-align: right;
            margin-top: @p20;
            padding-right: @p20;
            font-size: @p24;
            color: #888888;
            line-height: @p30;
        }
        .time span:first-child {
            color: #1c83fc;
        }
        .user_name {
            margin-left: @p30;
            font-size: @p24;
            line-height: @p100;
            color: #353535;
        }
    }
}

.ptsp_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: @p105;
    background-color: #ffffff;
    box-shadow: 0 0 10px #aaa;
    z-index: 100;
    .icon_box {
        float: left;
        width: @p120;
        text-align: center;
        padding-top: @p15;
        img {
            width: @p50;
        }
        div {
            font-size: @p22;
            line-height: @p24;
            color: #888888;
        }
    }
    .buy_only,
    .buy_team {
        width: @p200;
        height: 100%;
        background: linear-gradient(to right, #77d3fd, #77b6fd);
        float: right;
        color: #FFFFFF;
        font-size: @p24;
        text-align: center;
        padding-top: @p15;
    }
    .buy_team {
        background: linear-gradient(to right, #1cb3fc, #1c83fc);
    }
}

.ptsp_share {
    width: @p88;
    height: @p88;
    border-radius: 50%;
    background-color: #ffffff;
    position: fixed;
    box-shadow: 0 0 3px #ccc;
    right: @p20;
    bottom: @p130;
    text-align: center;
    font-size: @p22;
    z-index: 100;
    color: #1caafc;
    line-height: @p22;
    img {
        width: @p50;
    }
}

.ptsp_confirm_goods {
    position: fixed;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
    z-index: 1000;
    .ptsp_confirm_goods_info {
        width: 100%;
        padding-left: @p28;
        background-color: #FFFFFF;
        i {
            position: absolute;
            top: @p32;
            right: @p26;
            font-size: @p70;
        }
        .goods_img {
            width: @p256;
            height: @p256;
            display: inline-block;
            border: 2px solid #FFFFFF;
            position: relative;
            top: -@p36;
            img {
                width: 100%;
                display: inline-block;
                vertical-align: middle;
            }
        }
        .price {
            display: inline-block;
            width: @p320;
            margin-left: @p28;
            position: relative;
            top: @p20;
            font-size: @p22;
            .sale_price {
                font-size: @p36;
            }
            span {
                span {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        .sel_color {
            width: 100%;
            .color_items {
                overflow: hidden;
                width: 100%;
                .item {
                    float: left;
                    width: @p285;
                    height: @p70;
                    line-height: @p70;
                    text-align: center;
                    font-size: @p24;
                    border: 1px solid #353535;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-right: @p56;
                    margin-bottom: @p35;
                    border-radius: @p8;
                }
                .active {
                    border: 1px solid #1c83fc;
                    color: #1c83fc;
                }
            }
        }
        .sel_num {
            width: 100%;
            .num_btns {
                width: 100%;
                overflow: hidden;
                .cut,
                .num,
                .add {
                    float: left;
                    text-align: center;
                    color: #888888;
                    height: @p56;
                    line-height: @p56;
                    border: 1px solid #d7d7d7;
                }
                .num {
                    width: @p75;
                }
                .cut {
                    border-right: none;
                    border-top-left-radius: 3px;
                    border-bottom-left-radius: 3px;
                }
                .add {
                    border-left: none;
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                }
                .cut,
                .add {
                    width: @p80;
                    background-color: #f9f9f9;
                }
            }
        }
    }
    .btn {
        width: 100%;
        height: @p100;
        text-align: center;
        line-height: @p100;
        color: #FFFFFF;
        background: linear-gradient(to right, #1cb5fc, #1c83fc);
    }
}

.share_box {
    position: fixed;
    width: 100%;
    padding-left: @p30;
    padding-right: @p30;
    bottom: 0;
    left: 0;
    z-index: 1000;
    height: @p200;
    background-color: #ffffff;
    .share_box_item {
        width: 25%;
        float: left;
        text-align: center;
        padding-top: @p40;
        img {
            width: 50%;
        }
        div {
            font-size: @p24;
        }
    }
}

.slide-fade-enter-active {
    transition: all .1s linear;
}

.slide-fade-leave-active {
    transition: all .1s linear;
}

.slide-fade-enter,
.slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */

{
    transform: translateY(30px);
    opacity: 0.7;
}

// 分享
.cout_box {
    width: @p100;
    height: @p28;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    font-size: @p22;
    line-height: @p28;
    position: absolute;
    right: 0;
    color: #888888;
    bottom: @p10;
    span {
        float: left;
        width: 33.3%;
        text-align: center;
    }
}

.cout_box span:nth-child(2) {
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
}


.discount_box{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 999999;
    background-color: #fff;
    padding-bottom: @p30;
    .title{
        text-align: center;
        font-size: @p30;
        padding-top: @p30;
        padding-bottom: @p30;
    }
    .discount_list{
        .discount_item{
            position: relative;
            width: 100%;
            height: @p208;
            background-image: url(../../images/ptsp/discount2.png);
            background-size: 100% 100%;
            .price{
                position: absolute;
                top: @p56;
                left: @p114;
                color: #1c83fc;
                .price_tag{
                    font-size: @p28;
                }
                .price_num{
                    font-size: @p60;
                }
            }
            .price_text{
                position: absolute;
                top: @p122;
                left: @p114;
                color: #1c83fc;
                font-size: @p30;
            }
            .des_text{
                position: absolute;
                top: @p65;
                left: @p305;
                font-size: @p24;
                
            }
            .des_date{
                 position: absolute;
                top: @p122;
                left: @p305;
                font-size: @p20;
                color: #989898;
            }
        }
        .geted{
            background-image: url(../../images/ptsp/discount1.png);
        }
    }
}
